<template>
    <div>
      <span v-for="(result, index) in results" :key="index"
        :class="{ 'right': result === '回答正确', 'error': result === '回答错误', 'undo': result === '未完成' }">
        {{ index + 1 }}: {{ result }}
      </span>
    </div>
  </template>
  
  <script>
  import Bus from '@/main';
  export default {
    data() {
      return {
        results: Array(5).fill('未完成'),
      };
    },
    created() {
      // 监听事件
      Bus.$on('result-updated', (results) => {
        console.log(results)
        this.results = []
        this.results = results
      });
    },
    watch: {
      results(newValue) {
        console.log('变化了', newValue)
      }
    }
  };
  </script>
  
  <style scoped>
  .right {
    color: green;
  }
  
  .error {
    color: red;
  }
  
  .undo {
    color: #ccc;
  }
  </style>